<script lang="ts" setup>
import { chunkArray, getGamesImg } from "@/utils";

defineOptions({
  name: "Featured",
});
const props = withDefaults(
  defineProps<{
    title?: string;
    data?: any[];
    showMore?: boolean;
  }>(),
  {
    title: "",
    data: () => [],
    showMore: false,
  }
);
const emits = defineEmits<{
  (e: "clickTitle"): void;
}>();

const chunkData = computed(() => {
  return chunkArray(props.data, 3);
});

const attrs = useAttrs();
const router = useRouter();

// const { play } = usePlay();
const jumpToDetail = (game: any) => {
  router.push(`/detail?id=${game.id}`);
  // play(game);
};
</script>
<template>
  <div class="w-344 mx-auto mb-23" v-bind="{ ...attrs }">
    <div
      v-if="title"
      class="font-600 text-16 color-[#000] h-17 lh-19 mb-15"
      @click="emits('clickTitle')"
    >
      {{ title }}
      <img
        v-if="showMore"
        class="w-16 ml-2"
        src="@/assets/img/move_up.png"
        alt=""
      />
    </div>
    <div class="flex flex-col justify-start items-stretch gap-y-24">
      <div class="flex items-center" v-for="(arr, idx) in chunkData" :key="idx">
        <div
          @click="jumpToDetail(it)"
          :class="[
            'relative text-0 w-[calc((100%-32px)/3)]',
            j === arr.length - 1 ? 'mr-0' : 'mr-16',
          ]"
          v-for="(it, j) in arr"
          :key="j"
        >
          <img
            class="w-full h-134 rounded-10"
            :src="getGamesImg(it.pathPicture, '2')"
            alt=""
          />
          <p
            class="overflow-hidden text-ellipsis whitespace-nowrap w-full px-4 py-8 bg-[rgba(255,255,255,0.5)] rounded-rb-10 rounded-lb-10 absolute bottom-0 left-0 font-400 text-12 color-[#000] text-center font-600"
          >
            {{ it.name }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
